@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin flex {
  display: flex;
}

@mixin flex-column {
  @include flex;
  flex-direction: column;
}

@mixin flex-center {
  justify-content: center;
  align-items: center;
}

@mixin flex-1 {
  flex: 1;
}

@mixin flex-not-shrink {
  flex-shrink: 0;
}

/*文本*/

@mixin text-align($align:center) {
  text-align: $align;
}

@mixin font-grey {
  color: #9da3ae;
}

/* 间距 */
@mixin m1($margin:margin-left) {
  $margin: 12px;
}

// 白底毛玻璃背景
@mixin glassmorphism {
  box-sizing: border-box;
  color: #424245;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: -1px -1px 1px 0px rgba(255, 255, 255, .7),
  1px 1px 1px 0px rgba(255, 255, 255, .3);
}

// 黑底毛玻璃
@mixin glassmorphismBlack {
  box-sizing: border-box;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: -1px -1px 1px 0px rgba(255, 255, 255, .2),
  1px 1px 1px 0px rgba(255, 255, 255, .1);
}
